<!--
 @description：保存商家
 @author: Xg
 @date: 2021/6/25 15:26
-->
<template>
  <el-dialog
    :title="storeId?'编辑商家':'新增商家'"
    :visible="saveStoreVisible"
    width="30%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeDialog(false)"
  >
    <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
      <el-form-item label="商家名称">
        <el-input v-model="formData.storeName" />
      </el-form-item>
      <el-form-item label="商家描述">
        <el-input v-model="formData.remark" @keydown.enter.native="save" />
      </el-form-item>
      <!--      <el-form-item label="商家图片 (jpg,png)">-->
      <!--        <el-upload-->
      <!--          ref="avatarUpload"-->
      <!--          class="avatar-uploader"-->
      <!--          action="http://localhost:32011/store/saveImg"-->
      <!--          :headers="headers"-->
      <!--          accept="image/png, image/jpeg"-->
      <!--          :data="imgData"-->
      <!--          :show-file-list="false"-->
      <!--          :auto-upload="false"-->
      <!--          :on-change="handleChange"-->
      <!--          :on-success="handleAvatarSuccess"-->
      <!--        >-->
      <!--          <img v-if="imageSrc" :src="imageSrc" class="avatar">-->
      <!--          <i v-else class="el-icon-plus avatar-uploader-icon" />-->
      <!--        </el-upload>-->
      <!--      </el-form-item>-->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog(false)">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { save, getDetail } from '@/api/basic/store'
// import { getToken } from '@/utils/auth'

export default {
  name: 'SaveStore',
  props: {
    saveStoreVisible: {
      type: Boolean,
      default: false
    },
    storeId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      formData: {
        storeName: null,
        storeId: null,
        remark: null
        // 接收的时候使用
        // imgVO: null
      },
      // 图片上传参数
      // imgData: {
      //   storeId: null
      // },
      // imageSrc: null,
      // // 请求头
      // headers: {
      //   token: null
      // },
      // 表单验证
      rules: {
        storeName: [
          { required: true, message: '请输入菜品名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.storeId) {
      // 如果storeId有值，就查询详情
      this.getDetail()
    }
    // this.setHeaderToken()
  },
  methods: {
    // 图片上传
    handleChange(file) {
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
        return
      }
      this.imageSrc = URL.createObjectURL(file.raw)
    },
    // 图片保存
    handleAvatarSuccess(res, file) {
      if (res.code !== 200) {
        this.$message.error('头像保存失败!')
      }
    },
    // 设置请求头
    // setHeaderToken() {
    //   this.headers.token = getToken()
    // },
    // 关闭弹窗
    closeDialog(isRefresh) {
      this.formData = null
      this.$emit('close', isRefresh)
    },
    // 保存
    save() {
      this.formData.storeId = this.storeId
      save(this.formData).then(res => {
        // if (!this.imgData.storeId) {
        //   // 新增和更改都返回一个storeId,给图片保存使用
        //   this.imgData.storeId = res.data
        // }
        // // 保存头像
        // this.$refs.avatarUpload.submit()

        if (res.code === 200) {
          this.$message.success('保存成功!')
          this.closeDialog(true)
        }
      })
    },
    // 获取详情
    getDetail() {
      getDetail({ storeId: this.storeId }).then(res => {
        if (res.code === 200) {
          this.formData = res.data
        }
        // if (this.formData.imgVO) {
        //   this.imageSrc = 'data:image/jpeg;base64,' + this.formData.imgVO
        // }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
  }
  /deep/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
